<template>
  <div class="ms-list">
    <el-row class="operation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">
          <icon style="color: #0088cc" name="home"></icon>
        </el-breadcrumb-item>
        <el-breadcrumb-item>服务</el-breadcrumb-item>
        <el-breadcrumb-item>首联反馈</el-breadcrumb-item>
        <el-breadcrumb-item>统计占比图</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <ms-search :data="search.list" @click="updateConditions"></ms-search>

    <h1 style="text-align: center; margin-top: 40px; margin-bottom: 40px;">{{title}}</h1>

    <div v-for="(value, key) in recombineData" :key="key" class="chart"
         style="display: inline-block; margin-right: 10px;">
      <ve-ring :data="value" :title="value.title" :settings="chartSetting" :loading="chartLoading"
               :data-empty="value.empty" :legend-visible="false"></ve-ring>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import MsSearch from '@/components/common/Search.vue'
  import Api from '@/api/customer/service/daily-feedback'
  import {SEARCH_CONDITION} from '@/models/customer/service/daily-feedback'
  import 'v-charts/lib/style.css'

  export default {
    components: {
      MsSearch
    },
    created: function () {
      this.search.list = SEARCH_CONDITION
      this.search.list.forEach(item => {
        item.value = ''
      })

      let day = moment().subtract(1, 'days').format('YYYY-MM-DD')
      this.search.condition.date = day
      this.search.list[0].value = day

      this.chartData = {}
      this.requestList()
    },
    data () {
      return {
        search: {
          list: [],
          condition: {}
        },
        chartData: {},
        title: '',
        chartLoading: true,
        chartSetting: {
          radius: ['40%', '65%']
        },
        type: {
          impression: '意向',
          costCoin: '首次接听状态',
          click: '来源'
        },
        checkedTypes: ['意向'],
        show: {
          '意向': true,
          '首次接听状态': false,
          '来源': false
        }
      }
    },
    computed: {
      recombineData () {
        let data = {}
        data['意向'] = {}
        data['意向'].columns = ['option', 'num']
        if (this.chartData['意向'] !== undefined) {
          data['意向'].title = {text: '意向', left: 'center'}
          data['意向'].empty = false
          data['意向'].rows = []
          for (let key in this.chartData['意向']) {
            let record = {}
            record['option'] = this.chartData['意向'][key].intention
            record['num'] = this.chartData['意向'][key].num
            data['意向'].rows.push(record)
          }
        } else {
          data['意向'].title = {text: '', left: 'center'}
          data['意向'].empty = true
          data['意向'].rows = []
        }

        data['来源'] = {}
        data['来源'].columns = ['option', 'num']
        if (this.chartData['来源'] !== undefined) {
          data['来源'].title = {text: '来源', left: 'center'}
          data['来源'].empty = false
          data['来源'].rows = []
          for (let key in this.chartData['来源']) {
            let record = {}
            let resoure = this.chartData['来源'][key].resoure
            if (resoure === 1) {
              record['option'] = '百度搜索'
            } else if (resoure === 2) {
              record['option'] = '今日头条'
            } else if (resoure === 3) {
              record['option'] = '神马搜索'
            } else if (resoure === 4) {
              record['option'] = '搜狗搜索'
            } else if (resoure === 5) {
              record['option'] = '搜狗竞价'
            }
            record['num'] = this.chartData['来源'][key].num
            data['来源'].rows.push(record)
          }
        } else {
          data['来源'].title = {text: '', left: 'center'}
          data['来源'].empty = true
          data['来源'].rows = []
        }

        data['首次接听状态'] = {}
        data['首次接听状态'].columns = ['option', 'num']
        if (this.chartData['首次接听状态'] !== undefined) {
          data['首次接听状态'].title = {text: '首次接听状态', left: 'center'}
          data['首次接听状态'].empty = false
          data['首次接听状态'].rows = []
          for (let key in this.chartData['首次接听状态']) {
            let record = {}
            let firstAnswer = this.chartData['首次接听状态'][key].firstAnswer
            if (firstAnswer === 1) {
              record['option'] = '接听'
            } else if (firstAnswer === 2) {
              record['option'] = '拒接'
            } else if (firstAnswer === 3) {
              record['option'] = '拒绝'
            } else if (firstAnswer === 4) {
              record['option'] = '空错号'
            } else if (firstAnswer === 5) {
              record['option'] = '无人接听'
            } else if (firstAnswer === 6) {
              record['option'] = '无咨询'
            }
            record['num'] = this.chartData['首次接听状态'][key].num
            data['首次接听状态'].rows.push(record)
          }
        } else {
          data['首次接听状态'].title = {text: '', left: 'center'}
          data['首次接听状态'].empty = true
          data['首次接听状态'].rows = []
        }

        return data
      }
    },
    methods: {
      requestList () {
        this.chartLoading = true
        const search = Object.assign({}, this.search.condition)
        Api.getPieData({search: search}, response => {
          let status = response.status || 0
          let data = response.data || {}
          if (status === 200 || status === 204) {
            this.chartData = data.map
          } else {
            this.$message.error(response.data.error || '数据获取失败')
          }
          this.chartLoading = false
        })
      },
      updateConditions (conditions) {
        this.search.condition = Object.assign({}, conditions)
        this.requestList()
      },
      handleCheckedTypesChange (value) {
        for (let key in this.show) {
          this.show[key] = false
        }
        value.forEach(item => {
          this.show[item] = true
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @media screen and (min-width: 1200px) {
    .chart {
      width: 49%;
    }
  }

  @media screen and (max-width: 1200px) {
    .chart {
      width: 98%;
    }
  }
</style>
